<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .container {
        width: 100%;
        height: 700px;
        background: url('../lib/img/R-C\ \(2\).jfif') no-repeat;
        background-size: cover;
        overflow: hidden;
    }
    .container form {
        width: 450px;
        height: 400px;
        margin: 130px 200px;
        border-radius: 34px;
        background-color: rgba(64, 18, 231, 0.089);
    }
    h3 {
        font-size: 28px;
        text-align: center;
        line-height: 50px;
        margin-bottom: 50px;
    }
    .container .a {
        width: 350px;
        height: 100px;
        margin-top: 30px;
        margin: auto;
        font-size: x-large;
        line-height: 50px;
    }

    input {
        height: 30px;
        width: 250px;
    }

    button {
        font-size: x-large;
        width: 150px;
        margin-left: 100px;
    }
</style>
<body>
    <div class="container">
        <form>
            <h3>注册界面</h3>
            <div class="a">用户名: <input type="text" name="username"></div>
            <div class="a">密&nbsp&nbsp&nbsp码: <input type="text" name="password"></div>
            <div class="a"><button type="button">注册</button></div>
        </form>
    </div>
    <script>

        let btn = document.querySelector('button')
        let usernameV = document.querySelector('input[name="username"]')
        let passwordV = document.querySelector('input[name="password"]')
        btn.onclick = function () {
            let username = usernameV.value
            let password = passwordV.value
            if (username == '' || password == '') {
                alert('请输入用户名和密码')
            }
            else {
                //创建
                const xhr = new window.XMLHttpRequest
                //建立连接
                xhr.open('post', 'http://10.7.171.66:8089/api/login')
                //名称值对做参数时，用'content-type','application/x-www-form-urlencoded'
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
                //发送请求
                xhr.send(`username=${username}&password=${password}`)
                //响应
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            let text = xhr.responseText
                            console.log(text)
                            //字符串转对象
                            let obj = JSON.parse(text)
                            console.log('obj', obj)
                            if (obj.resultCode == -1) {
                                alert('登录不成功')
                            }
                            else {
                                alert('登录成功')
                                let user = {
                                    img: obj.resultInfo.headerimg,
                                    nick: obj.resultInfo.nick
                                }
                                console.log('user', user)
                                localStorage.setItem('arr', JSON.stringify(user))
                                location.href = './index.html'
                            }
                        }
                    }
                }

            }
        }
    </script>
</body>

</html>